<template>
    <ValidateForm @form-submit="onSubmit">
        <div class="mb-3 text-left">
            <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
            <ValidateInput placeholder="请输入邮箱" v-model="emailVal" :rules="emailRules" />
        </div>
        <div class="mb-3 text-left">
            <label for="exampleInputPassword1" class="form-label">密码</label>
            <ValidateInput placeholder="请输入密码" type="password" v-model="passwordVal" :rules="passwordRules" />
        </div>
        <template #submit>
            <button type="submit" class="btn btn-primary">登录</button>
        </template>
    </ValidateForm>
</template>

<script lang="ts">
import ValidateInput, { RulesProp } from "@/components/ValidateInput.vue";
import ValidateForm from "@/components/ValidateForm.vue";
import { useRouter } from "vue-router";
import { defineComponent, ref } from "vue";
import { useStore } from "vuex";
import createMessage from "@/components/createMessage";
const emailRules: RulesProp[] = [
    {
        type: "required",
        message: "邮箱不能为空",
    },
    {
        type: "email",
        message: "邮箱格式不合法",
    },
];
const passwordRules: RulesProp[] = [{ type: "required", message: "请输入密码" }];
export default defineComponent({
    components: {
        ValidateInput,
        ValidateForm,
    },
    setup() {
        const emailVal = ref("");
        const passwordVal = ref("");
        const router = useRouter();
        const store = useStore();
        const onSubmit = result => {
            if (result) {
                store.dispatch("loginAndFetch", { email: emailVal.value, password: passwordVal.value }).then(res => {
                    if (res.code === 0) {
                        createMessage("登陆成功，2S后跳转首页", "success");
                        setTimeout(() => {
                            router.push("/home");
                        }, 2000);
                    }
                });
            }
        };
        return {
            emailRules,
            emailVal,
            passwordVal,
            passwordRules,
            onSubmit,
        };
    },
});
</script>

<style scoped></style>
